<!--
* @description gmm信息列表
* @fileName gmm.vue
* @author huangyu
* @date 2022/06/11 14:39:39
!-->
<template>
    <div class="otor_content">
        <div class="otor_wrap border">
            <el-form :inline="true" class="otor_form otor_form_search">
                <el-form-item label="名称">
                    <el-input placeholder="名称" v-model="name"></el-input>
                </el-form-item>
                <el-form-item label="服务器">
                    <el-select v-model="group_name" style="width:100px;">
                        <el-option value="" label="全部"></el-option>
                        <el-option :value="item" :label="item" v-for="(item,index) in fwqList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职业">
                    <el-select v-model="p_job" style="width:100px;">
                        <el-option :value="null" label="全部"></el-option>
                        <el-option :value="index+1" :label="item" v-for="(item,index) in zyList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="种族">
                    <el-select v-model="p_race" style="width:100px;">
                        <el-option :value="null" label="全部"></el-option>
                        <el-option :value="1" label="天族"></el-option>
                        <el-option :value="2" label="魔族"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input placeholder="最小" v-model="min" style="width:80px"></el-input>
                    <el-input placeholder="最大" v-model="max" style="width:80px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="otor_wrap border">
            <el-table :data="list" highlight-current-row width="100%" border @sort-change="changeSort">
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <el-table-column label="名称" prop="p_name">
                    <template slot-scope="scope">
                        <a style="cursor:pointer;" class="color_blue" :href="`https://www.gmmsj.com/dy/78_zh/detail_${scope.row.book_id}.shtml`" target="_blank">{{scope.row.p_name}}</a>
                    </template>
                </el-table-column>
                <el-table-column label="其它描述" prop="other" width="140" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="服务器" prop="group_name" width="100"></el-table-column>
                <el-table-column label="职业" prop="p_job" width="100">
                    <template slot-scope="scope">
                        {{zyList[scope.row.p_job-1]}}
                    </template>
                </el-table-column>
                <el-table-column label="种族" prop="p_race" width="100">
                    <template slot-scope="scope">
                        {{scope.row.p_race==1?'天族':'魔族'}}
                    </template>
                </el-table-column>
                <el-table-column label="等级" prop="p_level" width="100"></el-table-column>
                <el-table-column label="更新时间" prop="update_time" width="100" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="性别" prop="p_sex" width="100">
                    <template slot-scope="scope">
                        {{scope.row.p_sex==1?'男':'女'}}
                    </template>
                </el-table-column>
                <el-table-column label="价格" prop="price" width="120" sortable="custom">
                    <template slot-scope="scope">
                        <strong class="color_danger">￥{{scope.row.price}}</strong>
                    </template>
                </el-table-column>
           </el-table>
        </div>

        <pagination
        :total="total"
        :current-page="pageindex"
        :display="pagesize"
        @pagechange="pagechange"
        ></pagination>

    </div>
</template>

<script>
import { get } from '@/common/app.js'
import pagination from "@/components/common/pagination.vue";
export default {
    props:{
        isComponents: Boolean,
    },
    components: {pagination},
    data() {
        return {
            zyList: ['剑星','守护星','杀星','弓星','魔道星','精灵星','治愈星','护法星'],
            fwqList: ['永恒之巅','谁与争锋','永恒之岛','红龙祭坛','火之神殿','八星争霸','王者之巅'],
            list: [],

            name: '',
            group_name: '',
            p_job: null,
            p_race: null,
            min: '',
            max: '',
            price: 'asc',

            pageindex: 1,  
            pagesize: 20,
            total: 0,
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        search(){
            this.pageindex = 1
            this.getData()
        },
        getData(){
            let params = {
                type: 'getAionGMM',
                data: {
                    type: 'getList',
                    name: this.name,
                    group_name: this.group_name,
                    p_job: this.p_job,
                    p_race: this.p_race,
                    min: this.min,
                    max: this.max,
                    price: this.price,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game',params).then(res=>{
                if(res){
                    this.list = res.list
                    this.total = res.total
                }
            })
        },
        pagechange: function(currentPage) {
            this.pageindex = currentPage;
            this.getData();
        },

        changeSort(val){
            if(val.order=="ascending"){
                this.price = 'asc'
            }
            if(val.order=="descending"){
                this.price = 'desc'
            }
            this.getData()
            // console.log(val)
        },
    },
}
</script>

<style scoped>
</style>